
<%--
  Created by IntelliJ IDEA.
  User: YCB
  Date: 2019/9/27
  Time: 18:53
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>大鹏-逍遥游</title>

    <link rel="stylesheet" href= "${pageContext.request.contextPath}/css/writeques.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-theme.css">

    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/dist/js/bootstrap.js"></script>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    <script src="${pageContext.request.contextPath}/js/qiniuone.js"></script>
    <script src="${pageContext.request.contextPath}/js/qiniutwo.js"></script>

    <style type="text/css">
        .tabs-container{
            width:650px;
            padding: 10px;
        }
        .tabs{
            display: table-cell;
            width: 1000px;
        }
        .tab{
            display: inline-block;
            border: 1px solid #c5c5c5;
            border-radius: 2px;
            height: 30px;
            margin-bottom: 14px;
            margin-right: 12px;
            padding: 0px 10px;
        }
        .tab .tab-show{
            margin-right: 5px;
        }
        .tab .tab-text{
            border: none;
            display: none;
            outline: none;
        }
        .tab .tab-edit{
            cursor: pointer;
            color:gray;
        }
        /*这是利用after后面加content*/
        /*.tab .tab-edit::after{
            content: "\270f";
        }*/
        /*这是设置一个背景图片*/
        .tab .tab-edit{
            /*margin-top: 3px;*/
            margin-left: 2px;
            cursor: pointer;
            width: 21px;
            height: 21px;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/edit_lable_c.png) no-repeat left 5px;
            background-position: 0px 6px;
        }
        .tab .tab-delete{
            cursor: pointer;
            width: 21px;
            height: 21px;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/delete_lable_c.png) no-repeat left 5px;
            background-position: 0px 6px;
        }

        .tab.active .tab-show{
            display: none;
        }
        .tab.active .tab-text{
            display: inline-block;
            font-size: 16px;
            width: 130px;
        }
        /*这是利用after后面加content*/
        /*.tab.active .tab-edit::after{
            content:"\2713";
        }*/
        /*这是设置一个背景图片*/
        .tab.active .tab-edit{
            color:blue;
            background: url(${pageContext.request.contextPath}/images/sure_lable_c.png) no-repeat left 5px;
            width: 21px;
            height: 21px;
            display: inline-block;
        }

        .tab.active .tab-delete{
            color: #666;
            display: none;
        }
        .tab.active .tab-delete:hover{
            color: #999;
        }
        .tab.active .tab-delete:active{
            color: #333;
        }
        .tabs .tab-add{
            width: 21px;
            height: 21px;
            cursor: pointer;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/add_lable_c.png) no-repeat  center;
            background-position: 0px 2px;
        }
        #btn{
            margin-top: 10px;
        }
    </style>
</head>
<body style="width: 1550px">
<c:choose>
    <c:when test="${memberall.userId != 0}">
        <c:if test="${memberall.userStatus == 0}">
            <img src="http://localhost:8080/mydev/images/vip.png" style="position:absolute;top:23px;right: 345px;z-index: 999;">
        </c:if>
        <c:if test="${memberall.userStatus == 1}">
            <a href="http://localhost:8080/mydev/VIP" style="position:absolute;top:13px;right: 400px;z-index: 999;">开通vip</a>
        </c:if>
    </c:when>
</c:choose>
<div class="header-container" style="width: 100%; min-width: 1500px;  ">

    <div class="row first-div" style="z-index: 999; width: 100%">
        <div class=" left-nav-ul" >
        </div>


        <ul class="mid-nav-ul" >
            <li class="nav-ul-li" >
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/start/index">
                    <div>
                        <img src="http://localhost:8080/mydev/images/logo.png">
                        逍遥游
                    </div>
                </a>

            </li>
            <li class="nav-ul-li" style="background-color: #ff9d00">
                <a style="text-decoration: none;color: #ffffff" href="http://localhost:8080/mydev/start/index">首页</a>
            </li>
            <li class="nav-ul-li">
                <a  style="text-decoration: none" href="http://localhost:8080/mydev/QuestionTable/club_questions">问答</a>
            </li>

            <li class="nav-ul-li">
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/clublist/list">鲲鹏俱乐部</a>
            </li>

            <li class="nav-ul-li new">
                <div class="geren">
                    <a  style="text-decoration: none; color:black" href="">更多</a>
                    <div class="t1"></div>
                </div>
                <div class="hidden1">
                    <ul class="geren-ul">
                        <li>
                            <a  style="text-decoration: none" href="http://localhost:8080/mydev/write/travel">写游记</a>
                        </li>
                        <li>
                            <a  style="text-decoration: none"  href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}">我的游记</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="nav-ul-li" >
                <c:choose>
                    <c:when test="${memberall.userId != 0}">
                        <c:if test="${memberall.userStatus ==0}">
                             <span  style="color: gold">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>
                        <c:if test="${memberall.userStatus ==1}">
                             <span  style="color: black">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>


                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/regist/normalRegist">注册</a>
                    </c:otherwise>
                </c:choose>

            </li>
            <li class="nav-ul-li">
                <c:choose>
                    <c:when test="${memberall.userId != 0}">

                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/login/login">登陆</a>
                    </c:otherwise>
                </c:choose>


            </li>
        </ul>




      <%--  <c:choose>
            <c:when test="${memberall.userId != 0}">

                <div class="right-nav-ul" >
                    <div class="topmaguser" style="  position:relative;left: 0px;top:2px">


                        <a href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}" >
                            <img src="http://localhost:8080/mydev/${memberall.userPicture}">
                        </a>

                    </div>
                    <ul class="right-mid" >
                        <li class="nav-ul-li new" >

                            <div class="geren">

                                <a style="text-decoration: none; color:black" href="">个人中心</a>

                                <div class="t2"></div>
                            </div>

                            <div class="hidden1">
                                <ul class="gere-ul">

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/collect/${memberall.userId}"><img src="http://localhost:8080/mydev/images/savea.png">我的收藏</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/mapview/${memberall.userId}"><img src="http://localhost:8080/mydev/images/foot.png">我的足迹</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/answer/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">我的问答</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/reply/toaccount/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">回复消息</a>
                                    </li>

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/exit"><img src="http://localhost:8080/mydev/images/banka.png">退出登录</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </c:when>
            <c:otherwise>



            </c:otherwise>
        </c:choose>--%>

    </div>
</div>


<div class="main">
    <div class="left">

        <div class="left-top">
            <div >
                <a>旅游问答</a>
                <span>>我要提问 </span>
            </div>
        </div>
        <div class="left-que">
            <li>问题标题</li>
            <div>
                <input id="Remark_information" name="Remark_information" type="text">

            </div>
        </div>

        <div class="left-main">
            <span>问题详细内容</span>

        </div>
<br>
        <div class="left-choose">
            <span>
                选择目的地
            </span>

            <div >
                <form class="layui-form" action="" >
                    <div class="layui-inline" >
                        <div class="layui-input-inline" >
                            <select name="modules" lay-verify="required" lay-search="" id="quearea">
                                <option value="">直接选择或搜索选择</option>
                                <option value="1">北京市</option>
                                <option value="2">天津市</option>
                                <option value="3">上海市</option>
                                <option value="4">重庆市</option>
                                <option value="5">河北省</option>
                                <option value="6">山西省</option>
                                <option value="7">辽宁省</option>
                                <option value="8">吉林省</option>
                                <option value="9">黑龙江省</option>
                                <option value="10">江苏省</option>
                                <option value="11">浙江省</option>
                                <option value="12">安徽省</option>
                                <option value="13">福建省</option>
                                <option value="14">江西省</option>
                                <option value="15">山东省</option>
                                <option value="16">河南省</option>
                                <option value="17">湖北省</option>
                                <option value="18">湖南省</option>
                                <option value="19">广东省</option>
                                <option value="20">海南省</option>
                                <option value="21">四川省</option>
                                <option value="22">贵州省</option>
                                <option value="23">云南省</option>
                                <option value="24">陕西省</option>
                                <option value="25">甘肃省</option>
                                <option value="26">青海省</option>
                                <option value="27">台湾省</option>
                                <option value="28">内蒙古自治区</option>
                                <option value="29">广西壮族自治区</option>
                                <option value="30">西藏自治区</option>
                                <option value="31">宁夏回族自治区</option>
                                <option value="32">新疆维吾尔自治区</option>
                                <option value="33">香港特别行政区</option>
                                <option value="34">澳门特别行政区</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

        </div>

        <div style="float: left">
            <span>添加标签</span>
            <div class="tabs-container">
                <div class="tabs" id="tabs">
                </div>
            </div>
            <script>

                var datas=[
                    {
                        text:"添加标签"
                    }
                ];

                $("#tabs").html(
                    datas.map(function(data){
                        return addTab(data);
                    })
                ).append(
                    $("<a/>",{
                        "class":"tab-add",
                        "text":"",
                        "click":function(){
                            $(this).before(
                                addTab({text:""})
                            )
                        }
                    })
                );

                //创建标签
                function addTab(data){
                    console.log("addTab")
                    var tab=$("<div/>",{
                        "class":"tab",
                        "style":"border-radius:4px"
                    }).append(
                        $("<span/>",{
                            "class":"tab-show",
                            "html":data.text
                        }),
                        $("<input/>",{
                            "class":"tab-text",
                            "value":data.text,
                            "maxlength":7
                        }),
                        $("<a/>",{
                            "class":"tab-edit",
                            "click":function(){
                                tab.toggleClass("active");
                                if(!tab.hasClass("active")){
                                    tab.find(".tab-show").html(tab.find(".tab-text").val());
                                }
                            }
                        }),
                        $("<a/>",{
                            "class":"tab-delete",
                            "text":"",
                            "click":function(){
                                tab.remove();
                            }
                        })
                    );
                    return tab;
                }
            </script>
          <button style="height: 38px;background-color: #ff9d00;float: right;position: absolute;top:350px;left: 270px" class="layui-btn">
                <i class="layui-icon"></i>上传头图</button>

            <form method="post" enctype="multipart/form-data" id="imgform" style=" position:absolute; height: 38px;opacity:0;background-color: blue; position: absolute;top:350px;left: 270px">
                <input type="file" name="myfile" id="myfile" style="height: 38px;width: 115px;opacity:0">
            </form>

        </div>

        <div id="travelpic" style="width: 250px;height: 250px;background-color: darkblue;float: left;  position:relative;top:25px" class="picsun">

        </div>


        <script>
            $("#myfile").change(function () {
                $("#imgform").ajaxSubmit({
                    url:"${pageContext.request.contextPath}/test/upload",
                    method:"POST",
                    dataType:"json",
                    success:function (data) {
                        console.log(data.imgUrl);
                        var ele ="<img>"
                        $("#travelpic").empty();
                        $("#travelpic").append(ele);
                        $("#travelpic").find("img").attr("src",data.imgUrl);
                    }
                    ,error:function (data) {
                        alert(data)
                    }
                })
            })
        </script>



<div style="width: 660px;height: 280px;float: left;position:relative;top:22px;">
    <textarea id="eduit"></textarea><%--富文本编辑器的位置--%>


</div>

<div class="send">
    <button data-method="notice" class="layui-btn" id="tijiao" onclick="tiwen()" type="button" style="background-color: #ff9d00">我要提问</button>
</div>




    </div>


    <div class="right">

        <div class="right-one">
            提问的正确姿势
        </div>
        <div class="right-two">
            1.问题要【具体】【真实】【诚恳】，问题较多，需全面阐述是，可以添加问题补充。
            结伴/交易/与旅行无关的提问将被删除。
        </div>
        <div class="right-three">
            2给问题添加目的地，并打上真确的标签将有助于更快的获得回答。
        </div>
    </div>

</div>





<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<%--建立富文本编辑器--%>
<script>
    var layedit
    var active;
    var index;

    layui.use('layedit', function(){
        layedit = layui.layedit;
        layedit.set({
            uploadImage:{
                url:'${pageContext.request.contextPath}/uploadFile',
                type:'post',

            }

        });
        index = layedit.build('eduit',{height: 282}); //建立编辑器


        active = {
            content: function(){
                alert(layedit.getContent(index)); //获取编辑器内容
            }
            ,text: function(){
                alert(layedit.getText(index)); //获取编辑器纯文本内容
            }
            ,selection: function(){
                alert(layedit.getSelection(index));
            }
        };

        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function tiwen() {
        var questitel = $("#Remark_information").val();//标题

        var myselect=document.getElementById("quearea");
        var aindex=myselect.selectedIndex ;
        var quesarea=  myselect.options[aindex].text;//目的地
        var quesbiao = $("#tabs span:first").text();//标签

        var quespic=  $("#travelpic img").attr('src');//头图
        var textall = layedit.getContent(index);//获取带标签的全部富文本数据
        var textTT = layedit.getText(index);//获取富文本纯文本数据
        var textthr = textTT.substring(0,30);//获取富文本前30个数据用来渲染首页的游记列表

         if(quesarea == ""){
            alert("请输入标题");
            return false;
        }else if(quesarea == "直接选择或搜索选择"){
            alert("请选择地区( ‘-ωก̀ )");
            return false;
        }else if(textTT.length<30){
            alert("备注信息至少100个字符哦 ( ‘-ωก̀ )");
            return false;
        }else{
            /* window.location.href="$/{pageContext.request.contextPath}/write/travelnote?questitel="+questitel+"&quesarea="+quesarea+"&quesbiao="+quesbiao+"&quespic="+quespic+"&textall="+textall+"&textthr="+textthr;*/
          $.ajax({
                type:"POST",
                // data:"questitel="+questitel+"&quesarea="+quesarea+"&quesbiao="+quesbiao+"&quespic="+quespic+"&textall="+textall+"&textthr="+textthr,
                data:{
                    "queTitle":questitel,
                    "queLoction":quesarea,
                    "queClasstitle":quesbiao,
                    "queOther1":quespic,
                    "queText":textall,
                    "queOther2":textthr
                },

                datatype:"json",
                url:"${pageContext.request.contextPath}/write/question",
                success:function (result){

                   location.href =" ${pageContext.request.contextPath}/QuestionTable/club_questions"

                },
              error:function (resutl) {
                  location.href =" ${pageContext.request.contextPath}/QuestionTable/club_questions"
              }
            })
            /*alert("questitel="+questitel+"&quesarea="+quesarea+"&quesbiao="+quesbiao+"&quespic="+quespic+"&textall="+textall+"&textthr="+textthr);*/
        }

    }

</script>



</body>
</html>
